<template>
<h2>显示房型</h2>


房型名称:<input type="text" v-model="FenYe.FName">
<button   @click="Show" class="btn btn-success"> 搜索</button>
<table class="table table-bordered">
<thead>
    <tr>
            <th>房型编号</th>
            <th>房型名称</th>
            <th>房型单价</th>
            <th>室内面积</th>
            <th>最多居住人数</th>
            <th>图片</th>
            <th>描述</th>
            <th>是否有窗户</th>
            <th>操作</th>

    </tr>

</thead>

<tbody v-for="item in Show1">
    <tr>
            <th>{{ item. fid}}</th>
            <th>{{ item.fname }}</th>
            <th>{{ item. price}}</th>
            <th>{{ item.mianJI }}</th>
            <th>{{ item.num }}</th>
            <th><img :src="item.img" style="height: 100px; width: 150px;"></th>
            <th>{{ item. mianShu}}</th>
            <th>{{ item. isWindow?"有窗":"无窗"}}</th>
                <th><a href="#" @click="TiaoZhuan(item.fid)">修改</a>
                    <button @click="Isdel(item.fid)">删除</button>
                
                </th>

           

    </tr>

</tbody>



</table>


        总共<span>{{FenYe.count}}</span>条
        每页{{ FenYe.s }}条
        共{{FenYe.Zy}}/{{FenYe.s}}页
    <button @click="Fenye1('S')" class="btn btn-success"> 首页</button>
    <button @click="Fenye1('L')" class="btn btn-success"> 上一页</button>
    <button @click="Fenye1('N')" class="btn btn-success">下一页</button>
    <button @click="Fenye1('M')" class="btn btn-success">尾页</button>






</template>



<script setup lang="ts">
import axios from 'axios';
import { onMounted,ref } from 'vue';
import { useRouter,createRouter } from 'vue-router';



//钩子函数
onMounted(()=>{
 
    Show();
})


//定义一个响应式数据接收后台的数据
const Show1=ref([{  
    "fid": 2,
      "fname": "",
      "price": 10,
      "mianJI": 10,
      "num": 1,
      "img": "1",
      "mianShu": "不好用",
      "isWindow": true,
      "isDel": true


}])

//创建响应式数据接收显示查询条件
const FenYe=ref({

    s:1,
    m:3,
    count:0,
    Zy:0,
    FName:""

})

///显示方法

const Show=()=>{

 axios.get('https://localhost:7247/api/FangXing/ShowFangXing',{params:{

        s:FenYe.value.s,
        m:FenYe.value.m,
        FName:FenYe.value.FName

 }}).then(res=>{

    Show1.value=res.data.data,
    FenYe.value.count=res.data.count
    FenYe.value.Zy=res.data.zy

 })

}


//分页跳转方法

const Fenye1 =(chool:string )=>{


    switch(chool){

            case 'S':
            FenYe.value.s =1
            break;

            case 'M':
            FenYe.value.s =FenYe.value.Zy
            break;

            case 'L':
                if(FenYe.value.s<=1)
                {
                    alert('页码不能小于1')
                    return ;
                }

                  FenYe.value.s -=1;
            break;

            case 'N':
            if(FenYe.value.s>=FenYe.value.Zy)
                {
                    alert('页码不能大于总页数')
                    return ;
                }

                  FenYe.value.s +=1;
            break;


    }
    Show();

}


const router =useRouter()//跳转的函数

//跳转到修改页面的方法并传id
const TiaoZhuan=(id:number)=>{

router.push({
        name:'UpdateFangXing',
        params:{

            id:id
        }


})




}

//删除的方法

const Isdel=(id:number)=>{


    if(!confirm('确定删除吗'))
{
    return ;
}
    axios.delete('https://localhost:7247/api/FangXing/IsDel',{params:{

        id:id,
    }}).then(res=>{

        if(res.data>0)
    {
        alert('删除成功')
        Show();
    }
    else
    {
        alert('删除失败')
    }
    })

}

</script>